import React from 'react'
import './index.scss'
import BarChat from './BarChat'

class RightCon extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      workDetailList: [
        {
          num: 'SBGJ20200528000605',
          time: '2020-05-28 08:00:07',
          adress: 'LJ4801006成山路1728弄1号西'
        },
        {
          num: 'SBGJ20200528000605',
          time: '2020-05-28 08:00:07',
          adress: 'LJ4801006成山路1728弄1号西'
        },
        {
          num: 'SBGJ20200528000605',
          time: '2020-05-28 08:00:07',
          adress: 'LJ4801006成山路1728弄1号西'
        },
        {
          num: 'SBGJ20200528000605',
          time: '2020-05-28 08:00:07',
          adress: 'LJ4801006成山路1728弄1号西'
        },
      ],
      workEffectList: [
        {
          name: '御桥一居',
          percent: '43%'
        },
        {
          name: '御桥一居',
          percent: '33%'
        },
        {
          name: '御桥一居',
          percent: '83%'
        },
      ]
    }
  }
  render() {
    let workDetailList = this.state.workDetailList.map((item, index)=> {
      return (
        <li className="work-detail-item" key={index}>
          <span className="item-con">{item.num}</span>
          <span className="item-con">{item.time}</span>
          <span className="item-con">{item.adress}</span>
          <span className="item-con detail-btn">查看详情</span>
        </li>
      )
    })
    let _workEffectList = []
    // eslint-disable-next-line
    this.state.workEffectList.map(item=> {
      _workEffectList.push({
        name: item.name,
        percent: parseInt(item.percent)
      })
    })
    let workEffectUl = _workEffectList.map((item, index)=> {
      return (
        <li className="work-effect-item" key={index}>
          <span className={`item-icon ${index}`}></span>
          <span className="item-name">{item.name}</span>
          <span className="item-bar">
            <span className="bar-inner" style={{width: item.percent + '%'}}></span>
          </span>
          <span className="item-percent">{item.percent}%</span>
        </li>
      )
    })
    return (
      <>
        <div className="cell work-bar-container">
          <div className="cell-title-box">
            <div className="title"><span className="title-icon"></span>告警高发时段工单数</div>
            <div className="tab">
              <span className="tab-item selected">周</span>
              <span className="tab-item">月</span>
            </div>
          </div>
          <div className="d">
            <BarChat></BarChat>
          </div>
        </div>
        <div className="cell work-detail-container">
          <div className="cell-title-box">
            <div className="title"><span className="title-icon"></span>告警高发时段工单数</div>
            <div className="tab">
              <span className="tab-item selected">已处理</span>
              <span className="tab-item">未处理</span>
            </div>
          </div>
          <ul className="work-detail-ul">
            <li className="work-detail-item header">
              <span className="item-con">工单编号</span>
              <span className="item-con">违规时间</span>
              <span className="item-con">违规地址</span>
              <span className="item-con">详情</span>
            </li>
            {workDetailList}
            {workDetailList}
          </ul>
        </div>
        <div className="cell work-effect-container">
          <div className="cell-title-box">
            <div className="title"><span className="title-icon"></span>告警高发时段工单数</div>
            <div className="tab">
              <span className="tab-item selected">日</span>
              <span className="tab-item">周</span>
              <span className="tab-item">月</span>
            </div>
          </div>
          <div className="sub-title">从高到低(前10个)</div>
          <ul className="work-effect-ul">
            {workEffectUl}
          </ul>
        </div>
      </>
    )
  }
}

export default RightCon